<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row>
        <a-col>
          <a-form
            :form="form"
            :layout="formLayout"
            class="myform"
            style="width:600px;"
            :labelCol="formConfig.labelCol"
            :wrapperCol="formConfig.wrapperCol"
          >
            <a-form-item label="姓名">
              <a-input type="text" v-decorator="['username', { rules: [{ required: true, message: '姓名必填' }] }]" />
            </a-form-item>
            <a-form-item label="年龄">
              <a-input-number
                :min="12"
                :max="24"
                v-decorator="[
                  'age',
                  {
                    rules: [{ required: true, min: 5, message: '最小12岁', type: 'number' }]
                  }
                ]"
              />
            </a-form-item>
            <a-form-item label="选项">
              <a-radio-group v-decorator="['option', { rules: [{ required: true, message: '必选' }] }]">
                <a-radio-button value="v1">选项1</a-radio-button>
                <a-radio-button value="v2">选项2</a-radio-button>
                <a-radio-button value="v3">选项3</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="选项2">
              <a-checkbox-group
                v-decorator="[
                  'option2',
                  {
                    rules: [
                      { required: true, message: '必选' },
                      { min: 2, message: '最小选择2项', type: 'array' }
                    ]
                  }
                ]"
              >
                <a-checkbox value="v1">选项1</a-checkbox>
                <a-checkbox value="v2">选项2</a-checkbox>
                <a-checkbox value="v3">选项3</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            <a-form-item label="日期">
              <a-date-picker v-decorator="['option', { rules: [{ required: true, message: '必选' }] }]"></a-date-picker>
              <a-month-picker></a-month-picker>
              <a-week-picker></a-week-picker>
              <a-range-picker></a-range-picker>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="check">提交</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
      <a-radio-group @change="onChange" :value="formLayout">
        <a-radio-button value="inline">内联</a-radio-button>
        <a-radio-button value="horizontal">水平</a-radio-button>
        <a-radio-button value="vertical">垂直</a-radio-button>
      </a-radio-group>
    </a-card>
    <a-card :bordered="false">
      <a-row>
        <a-form-model ref="c-form" :model="formM" :rules="rules" v-bind="layout" style="max-width:700px">
          <a-form-model-item label="姓名" prop="name">
            <a-input v-model="formM.name"></a-input>
          </a-form-model-item>
          <a-form-model-item label="年龄" prop="age">
            <a-input v-model.number="formM.age"></a-input>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="submit">提交</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-row>
    </a-card>
  </page-header-wrapper>
</template>
<script>
export default {
  data() {
    return {
      formLayout: 'inline',
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
      formM: {
        name: '',
        age: ''
      },
      layout: {
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 14
        }
      },
      rules: {
        name: [
          {
            required: true,
            message: '姓名必填'
          }
        ],
        age: [
          {
            required: true,
            message: '年龄必填'
          },
          {
            type: 'number',
            min: 10,
            max: 99,
            message: '年龄范围10-99'
          }
        ]
      }
    }
  },
  computed: {
    formConfig() {
      return this.formLayout === 'horizontal'
        ? {
            labelCol: {
              span: 6
            },
            wrapperCol: {
              span: 14
            }
          }
        : {}
    }
  },
  methods: {
    onChange(e) {
      this.formLayout = e.target.value
      console.log(e)
    },
    check() {
      console.log(this.form.getFieldsValue())
      this.form.validateFields(err => {
        console.log(err)
        if (!err) {
        }
      })
    },
    submit() {
      this.$refs['c-form'].validate(err => {
        if (err) {
          console.log(err)
        }
      })
    }
  },
  mounted() {}
}
</script>
<style type="text/css"></style>
